import { ReactNode, useEffect, useRef, useState } from 'react';
import { View, Input, Text, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import styles from './index.module.less';
import { observer } from "mobx-react-lite";
import PageLayer from '@/components/PageLayer/PageLayer';
import GoodsTemlate from './GoodsTemlate/GoodsTemlate';
import Designer from '../Designer/Designer';
import goodsBaseApi from '@/api/goodsBaseApi';
import designerStore from '../Designer/designerStore';
import { isEmpty } from "lodash";
import { Check } from '@nutui/icons-react-taro';
import indexStore from './indexStore';
import MyEmpty from '@/components/MyEmpty/MyEmpty';
import { toJS } from 'mobx';
import designerRender from '../Designer/designerRender';
import ttOrderApi from '@/api/ttOrderApi';

interface Iprops {
    children?: ReactNode
}

// 组件
const Index = observer((props: Iprops) => {

    const texts = toJS(indexStore.texts);
    const imgs = toJS(indexStore.imgs);

    console.log(texts, imgs);

    // 表单数据状态管理
    const [formData, setFormData] = useState({
        text: '',
        imagePath: ''
    });
    // 订单状态错误提示
    const [showOrderError, setShowOrderError] = useState(false);
    // 错误消息
    const [errorMessage, setErrorMessage] = useState('未下订单');

    useEffect(() => {

        ttOrderApi.authLogin().catch((error) => {
            console.error('登录验证失败:', error);
            setErrorMessage(error.message || '登录验证失败');
            setShowOrderError(true);
        });

        ttOrderApi.getProductNegativeById().then(async (goodsBaseData) => {
            designerStore.setGoodsBaseData(goodsBaseData);

            // const design_data = goodsBaseData.data.design_data;

            // if (!isEmpty(design_data)) {
            //     if (["烫画", "直喷"].includes(goodsBaseData.secondaryCraftName)) {
            //         const currentColor = goodsBaseData.data.colors.find((c) => c.cn === color);
            //         if (currentColor) {
            //             await designerStore.setDesignColor(currentColor.cn, currentColor.color);
            //         }
            //     }
            // }
        }).catch((error) => {
            console.error('获取底板信息失败:', error);
            // 设置错误状态和错误消息
            setErrorMessage(error.message || '获取底板信息失败');
            setShowOrderError(true);
        });

    }, []);

    return (
        <PageLayer
            title='简易版 优T定制 工具'
            hasTabBar={false}
            className={styles.index}
        >
            {/* 未下订单提示 - 使用MyEmpty组件 */}
            {showOrderError && (
                <div className={styles.errorContentWrapper}>
                    <MyEmpty
                        description={errorMessage}
                        className={styles.emptyContainer}
                    />
                    <Text className={styles.tipText}>立即创建您的第一个订单，开始个性化设计之旅！</Text>
                </div>
            )}
            {!showOrderError && (
                <>
                    {/* 商品模板 */}
                    <GoodsTemlate />

                    {/* 设计器 */}
                    <Designer />

                    {/* 表单组件 */}
                    <View className={styles.formContainer}>
                        {texts.map((item, index) => (
                            <View key={item.id} className={styles.formItem}>
                                <Text className={styles.label}>文本输入 {index + 1}：</Text>
                                <Input
                                    className={styles.input}
                                    placeholder="请输入内容"
                                    defaultValue={item.text}
                                    onInput={(e) => {
                                        designerRender.modifyObjectById(item.id, { text: e.detail.value });
                                    }}
                                />
                                {/* 文本样式控制按钮 */}
                                <View className={styles.textControlButtons}>
                                    <Button
                                        className={styles.controlButton}
                                        size="mini"
                                        onClick={() => {
                                            designerRender.addFontSize(item.id, 10);
                                        }}>
                                        增大字号
                                    </Button>
                                    <Button
                                        className={styles.controlButton}
                                        size="mini"
                                        onClick={() => {
                                            designerRender.addFontSize(item.id, -10);
                                        }}>
                                        减少字号
                                    </Button>
                                    <Button
                                        className={styles.controlButton}
                                        size="mini"
                                        onClick={() => {
                                            // 颜色选择功能
                                            console.log('选择颜色');
                                            // 这里可以实现颜色选择器的显示逻辑
                                        }}>
                                        颜色
                                    </Button>
                                </View>
                            </View>
                        ))}
                        {/* 如果没有文本项，显示提示信息 */}
                        {texts.length === 0 && (
                            <View className={styles.formItem}>
                                <Text className={styles.emptyText}>暂无文本数据</Text>
                            </View>
                        )}

                        <View className={styles.formItem}>
                            <Text className={styles.label}>图片上传：</Text>
                            <View className={styles.uploadContainer}>
                                <View
                                    className={styles.uploadButton}
                                    onClick={() => {
                                        Taro.chooseImage({
                                            count: 1,
                                            success: (res) => {
                                                const tempFilePath = res.tempFilePaths[0];
                                                setFormData(prev => ({ ...prev, imagePath: tempFilePath }));

                                                // 这里可以添加图片预览或上传逻辑
                                            },
                                            fail: (err) => {
                                                console.error('选择图片失败:', err);
                                            }
                                        });
                                    }}
                                >
                                    {/* 正方形图片区域 */}
                                </View>
                            </View>
                        </View>

                        {/* 提交按钮 */}
                        <Button
                            className={styles.submitButton}
                            type="primary"
                            onClick={() => {
                                // 不校验空规则，直接提交表单数据

                                // 直接进行表单提交逻辑，不做任何非空校验
                                // 可以在这里调用API进行数据提交
                            }}
                        >
                            <Check className={styles.buttonIcon} /> 提交设计
                        </Button>

                    </View>
                </>
            )}

        </PageLayer>
    )
});

export default Index;


